// 快速入门页面
import Navbar from '../components/Navbar.js';
import Footer from '../components/Footer.js';
import { navigateTo } from '../router/index.js';

function GettingStarted() {
  const gettingStartedPage = document.createElement('div');
  gettingStartedPage.className = 'min-h-screen flex flex-col';
  
  // 创建导航栏
  const navbar = Navbar();
  gettingStartedPage.appendChild(navbar);
  
  // 页面内容
  const contentContainer = document.createElement('div');
  contentContainer.className = 'flex-grow';
  contentContainer.innerHTML = `
    
    <!-- 页面标题区 -->
    <section class="bg-gradient-to-br from-blue-50 to-indigo-50 section-padding">
      <div class="container mx-auto px-4 md:px-8 text-center">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4">快速入门</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          跟随以下步骤，快速上手MSRM3网络管理系统
        </p>
      </div>
    </section>
    
    <!-- 安装指南 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
          <!-- 步骤导航 -->
          <div class="md:col-span-1">
            <div class="bg-gray-50 rounded-xl p-6 border border-gray-100 sticky top-6">
              <h3 class="text-xl font-bold mb-6 text-primary">入门步骤</h3>
              <ul class="space-y-4">
                <li>
                  <a href="#installation" class="step-link active flex items-center">
                    <span class="step-number mr-3">01</span>
                    <span>安装MSRM3</span>
                  </a>
                </li>
                <li>
                  <a href="#first-run" class="step-link flex items-center">
                    <span class="step-number mr-3">02</span>
                    <span>首次运行</span>
                  </a>
                </li>
                <li>
                  <a href="#basic-config" class="step-link flex items-center">
                    <span class="step-number mr-3">03</span>
                    <span>基本配置</span>
                  </a>
                </li>
                <li>
                  <a href="#discover-network" class="step-link flex items-center">
                    <span class="step-number mr-3">04</span>
                    <span>发现网络设备</span>
                  </a>
                </li>
                <li>
                  <a href="#monitoring" class="step-link flex items-center">
                    <span class="step-number mr-3">05</span>
                    <span>设置监控告警</span>
                  </a>
                </li>
                <li>
                  <a href="#advanced-features" class="step-link flex items-center">
                    <span class="step-number mr-3">06</span>
                    <span>高级功能</span>
                  </a>
                </li>
              </ul>
              <div class="mt-8">
                <a href="/download" class="btn-primary block text-center w-full">
                  <i class="fa fa-download mr-2"></i>下载MSRM3
                </a>
              </div>
            </div>
          </div>
          
          <!-- 主要内容 -->
          <div class="md:col-span-2 space-y-16">
            <!-- 步骤1: 安装MSRM3 -->
            <div id="installation">
              <div class="step-header mb-6">
                <div class="flex items-center mb-4">
                  <div class="step-icon mr-4">01</div>
                  <h2 class="text-2xl font-bold">安装MSRM3</h2>
                </div>
                <div class="step-divider"></div>
              </div>
              
              <div class="space-y-6">
                <p class="text-gray-700">
                  MSRM3提供了多个平台的安装包，您可以根据自己的操作系统选择合适的版本进行安装。
                </p>
                
                <div class="bg-gray-50 rounded-lg p-6 border border-gray-100 mb-6">
                  <h3 class="text-lg font-bold mb-4">Windows系统安装</h3>
                  <ol class="list-decimal ml-6 space-y-3">
                    <li class="text-gray-700">
                      <span class="font-medium">下载安装包：</span>
                      访问<a href="/download" class="text-primary hover:underline">下载中心</a>，下载适用于Windows系统的安装包。
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">运行安装程序：</span>
                      双击下载的安装包（.exe文件），按照安装向导的提示完成安装。
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">完成安装：</span>
                      安装完成后，勾选"创建桌面快捷方式"选项，点击"完成"按钮。
                    </li>
                  </ol>
                </div>
                
                <div class="bg-gray-50 rounded-lg p-6 border border-gray-100 mb-6">
                  <h3 class="text-lg font-bold mb-4">Linux系统安装</h3>
                  <ol class="list-decimal ml-6 space-y-3">
                    <li class="text-gray-700">
                      <span class="font-medium">下载安装包：</span>
                      访问<a href="/download" class="text-primary hover:underline">下载中心</a>，下载适用于Linux系统的安装包。
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">授予执行权限：</span>
                      打开终端，进入下载目录，执行命令：<code class="bg-gray-200 px-2 py-1 rounded">chmod +x MSRM3-linux-x64-v3.25.920.1</code>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">运行程序：</span>
                      执行命令：<code class="bg-gray-200 px-2 py-1 rounded">./MSRM3-linux-x64-v3.25.920.1</code> 启动MSRM3。
                    </li>
                  </ol>
                </div>
                
                <div class="bg-gray-50 rounded-lg p-6 border border-gray-100">
                  <h3 class="text-lg font-bold mb-4">国产系统安装</h3>
                  <p class="text-gray-700 mb-4">
                    MSRM3支持银河麒麟、统信UOS等国产操作系统，安装步骤与Linux系统类似。
                  </p>
                  <ol class="list-decimal ml-6 space-y-3">
                    <li class="text-gray-700">
                      <span class="font-medium">下载对应系统的安装包：</span>
                      访问<a href="/download" class="text-primary hover:underline">下载中心</a>，选择适合您国产系统的版本。
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">授予执行权限：</span>
                      打开终端，进入下载目录，执行命令：<code class="bg-gray-200 px-2 py-1 rounded">chmod +x 文件名</code>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">运行程序：</span>
                      执行命令：<code class="bg-gray-200 px-2 py-1 rounded">./文件名</code> 启动MSRM3。
                    </li>
                  </ol>
                </div>
              </div>
            </div>
            
            <!-- 步骤2: 首次运行 -->
            <div id="first-run">
              <div class="step-header mb-6">
                <div class="flex items-center mb-4">
                  <div class="step-icon mr-4">02</div>
                  <h2 class="text-2xl font-bold">首次运行</h2>
                </div>
                <div class="step-divider"></div>
              </div>
              
              <div class="space-y-6">
                <p class="text-gray-700">
                  安装完成后，您可以通过以下方式启动MSRM3：
                </p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                  <div class="bg-gray-50 rounded-lg p-6 border border-gray-100">
                    <h3 class="text-lg font-bold mb-4">Windows系统</h3>
                    <ul class="space-y-3">
                      <li class="flex items-start">
                        <i class="fa fa-desktop text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">双击桌面快捷方式启动MSRM3</span>
                      </li>
                      <li class="flex items-start">
                        <i class="fa fa-windows text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">通过"开始"菜单找到并启动MSRM3</span>
                      </li>
                    </ul>
                  </div>
                  
                  <div class="bg-gray-50 rounded-lg p-6 border border-gray-100">
                    <h3 class="text-lg font-bold mb-4">Linux/国产系统</h3>
                    <ul class="space-y-3">
                      <li class="flex items-start">
                        <i class="fa fa-terminal text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">通过终端执行命令启动MSRM3</span>
                      </li>
                      <li class="flex items-start">
                        <i class="fa fa-file-text-o text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">创建桌面启动器方便日常使用</span>
                      </li>
                    </ul>
                  </div>
                </div>
                
                <div class="bg-blue-50 rounded-lg p-6 border border-blue-100">
                  <h3 class="text-lg font-bold mb-4 flex items-center">
                    <i class="fa fa-info-circle text-blue-500 mr-2"></i>
                    启动说明
                  </h3>
                  <p class="text-gray-700 mb-4">
                    MSRM3启动后，系统会在默认浏览器中自动打开管理界面。如果浏览器没有自动打开，您可以手动在浏览器中访问：<code class="bg-white px-2 py-1 rounded">http://localhost:8888</code>
                  </p>
                  <p class="text-gray-700">
                    首次启动时，系统会提示您设置管理员账户和密码。请妥善保管您的账户信息，这将用于后续登录MSRM3管理界面。
                  </p>
                </div>
              </div>
            </div>
            
            <!-- 步骤3: 基本配置 -->
            <div id="basic-config">
              <div class="step-header mb-6">
                <div class="flex items-center mb-4">
                  <div class="step-icon mr-4">03</div>
                  <h2 class="text-2xl font-bold">基本配置</h2>
                </div>
                <div class="step-divider"></div>
              </div>
              
              <div class="space-y-6">
                <p class="text-gray-700">
                  登录MSRM3后，您需要进行一些基本配置，以确保系统能够正常运行。
                </p>
                
                <div class="bg-gray-50 rounded-lg p-6 border border-gray-100 mb-6">
                  <h3 class="text-lg font-bold mb-4">设置系统参数</h3>
                  <ol class="list-decimal ml-6 space-y-3">
                    <li class="text-gray-700">
                      <span class="font-medium">点击左侧菜单栏的"系统设置"选项</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">在"基本设置"页面中，配置系统名称、语言等基本参数</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">在"网络设置"页面中，配置监听端口、IP地址等网络参数</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">点击"保存"按钮，使配置生效</span>
                    </li>
                  </ol>
                </div>
                
                <div class="bg-gray-50 rounded-lg p-6 border border-gray-100">
                  <h3 class="text-lg font-bold mb-4">用户管理</h3>
                  <p class="text-gray-700 mb-4">
                    除了管理员账户外，您还可以创建其他用户账户，并分配不同的权限：
                  </p>
                  <ol class="list-decimal ml-6 space-y-3">
                    <li class="text-gray-700">
                      <span class="font-medium">点击左侧菜单栏的"用户管理"选项</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">点击"新增用户"按钮，填写用户名、密码等信息</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">选择用户角色（管理员、操作员、只读用户）</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">点击"确定"按钮，创建用户账户</span>
                    </li>
                  </ol>
                </div>
              </div>
            </div>
            
            <!-- 步骤4: 发现网络设备 -->
            <div id="discover-network">
              <div class="step-header mb-6">
                <div class="flex items-center mb-4">
                  <div class="step-icon mr-4">04</div>
                  <h2 class="text-2xl font-bold">发现网络设备</h2>
                </div>
                <div class="step-divider"></div>
              </div>
              
              <div class="space-y-6">
                <p class="text-gray-700">
                  MSRM3提供了多种网络设备发现方式，您可以根据自己的需求选择合适的方式。
                </p>
                
                <div class="bg-gray-50 rounded-lg p-6 border border-gray-100 mb-6">
                  <h3 class="text-lg font-bold mb-4">自动扫描发现</h3>
                  <ol class="list-decimal ml-6 space-y-3">
                    <li class="text-gray-700">
                      <span class="font-medium">点击左侧菜单栏的"网络发现"选项</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">选择"自动扫描"标签页</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">在"IP范围"输入框中，输入您要扫描的IP地址范围</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">选择扫描方式（ICMP、SNMP、ARP等）</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">点击"开始扫描"按钮，系统开始扫描网络设备</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">扫描完成后，您可以在扫描结果中查看发现的设备</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">勾选您想添加的设备，点击"添加到拓扑"按钮</span>
                    </li>
                  </ol>
                </div>
                
                <div class="bg-gray-50 rounded-lg p-6 border border-gray-100">
                  <h3 class="text-lg font-bold mb-4">手动添加设备</h3>
                  <p class="text-gray-700 mb-4">
                    如果您已经知道设备的IP地址和其他信息，也可以手动添加设备：
                  </p>
                  <ol class="list-decimal ml-6 space-y-3">
                    <li class="text-gray-700">
                      <span class="font-medium">点击左侧菜单栏的"网络拓扑"选项</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">点击"手动添加设备"按钮</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">填写设备名称、IP地址、设备类型等信息</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">如果是可管理设备，还需要填写SNMP信息或其他认证信息</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">点击"确定"按钮，添加设备到拓扑图</span>
                    </li>
                  </ol>
                </div>
              </div>
            </div>
            
            <!-- 步骤5: 设置监控告警 -->
            <div id="monitoring">
              <div class="step-header mb-6">
                <div class="flex items-center mb-4">
                  <div class="step-icon mr-4">05</div>
                  <h2 class="text-2xl font-bold">设置监控告警</h2>
                </div>
                <div class="step-divider"></div>
              </div>
              
              <div class="space-y-6">
                <p class="text-gray-700">
                  MSRM3提供了强大的监控和告警功能，帮助您及时发现和解决网络问题。
                </p>
                
                <div class="bg-gray-50 rounded-lg p-6 border border-gray-100 mb-6">
                  <h3 class="text-lg font-bold mb-4">配置监控项</h3>
                  <ol class="list-decimal ml-6 space-y-3">
                    <li class="text-gray-700">
                      <span class="font-medium">点击左侧菜单栏的"监控设置"选项</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">在"监控项管理"页面中，点击"新增监控项"按钮</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">选择监控类型（CPU利用率、内存使用率、网络流量等）</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">设置监控周期、阈值等参数</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">点击"保存"按钮，创建监控项</span>
                    </li>
                  </ol>
                </div>
                
                <div class="bg-gray-50 rounded-lg p-6 border border-gray-100">
                  <h3 class="text-lg font-bold mb-4">配置告警规则</h3>
                  <p class="text-gray-700 mb-4">
                    配置告警规则，当监控指标超过设定阈值时，系统会通过多种方式通知您：
                  </p>
                  <ol class="list-decimal ml-6 space-y-3">
                    <li class="text-gray-700">
                      <span class="font-medium">点击左侧菜单栏的"告警设置"选项</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">在"告警规则管理"页面中，点击"新增告警规则"按钮</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">选择关联的监控项，设置告警级别、触发条件等</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">设置告警通知方式（邮件、短信、Webhook等）</span>
                    </li>
                    <li class="text-gray-700">
                      <span class="font-medium">点击"保存"按钮，创建告警规则</span>
                    </li>
                  </ol>
                </div>
              </div>
            </div>
            
            <!-- 步骤6: 高级功能 -->
            <div id="advanced-features">
              <div class="step-header mb-6">
                <div class="flex items-center mb-4">
                  <div class="step-icon mr-4">06</div>
                  <h2 class="text-2xl font-bold">高级功能</h2>
                </div>
                <div class="step-divider"></div>
              </div>
              
              <div class="space-y-6">
                <p class="text-gray-700">
                  MSRM3还提供了多种高级功能，帮助您更高效地管理和维护网络。
                </p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div class="bg-gray-50 rounded-lg p-6 border border-gray-100">
                    <h3 class="text-lg font-bold mb-4">网络工具</h3>
                    <p class="text-gray-700 mb-4">
                      MSRM3内置了多种网络工具，方便您进行网络诊断和故障排查：
                    </p>
                    <ul class="space-y-2">
                      <li class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">Ping工具：测试网络连通性</span>
                      </li>
                      <li class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">Traceroute：追踪数据包路径</span>
                      </li>
                      <li class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">Port Scan：端口扫描</span>
                      </li>
                      <li class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">SNMP Walk：获取SNMP设备信息</span>
                      </li>
                    </ul>
                  </div>
                  
                  <div class="bg-gray-50 rounded-lg p-6 border border-gray-100">
                    <h3 class="text-lg font-bold mb-4">数据报表</h3>
                    <p class="text-gray-700 mb-4">
                      MSRM3提供了丰富的数据报表功能，帮助您分析网络性能和趋势：
                    </p>
                    <ul class="space-y-2">
                      <li class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">性能报表：展示网络设备性能数据</span>
                      </li>
                      <li class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">流量报表：分析网络流量情况</span>
                      </li>
                      <li class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">告警报表：统计告警事件</span>
                      </li>
                      <li class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                        <span class="text-gray-700">自定义报表：根据需求生成报表</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 常见问题 -->
    <section class="section-padding bg-gray-50">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-3xl font-bold text-dark text-center mb-12">入门常见问题</h2>
        <div class="max-w-3xl mx-auto space-y-6">
          <!-- 问题1 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 class="text-lg font-bold mb-3">MSRM3对系统有什么要求？</h3>
            <p class="text-gray-600">
              MSRM3对系统资源要求较低，基本配置：CPU 1GHz以上，内存 2GB以上，磁盘空间 10GB以上。支持Windows 7及以上版本、Linux（Ubuntu 20.04+、Debian 11+、CentOS 7+等）和国产操作系统（银河麒麟、统信UOS等）。
            </p>
          </div>
          
          <!-- 问题2 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 class="text-lg font-bold mb-3">如何修改MSRM3的监听端口？</h3>
            <p class="text-gray-600">
              登录MSRM3管理界面后，点击左侧菜单栏的"系统设置"选项，在"网络设置"页面中，修改"监听端口"参数，点击"保存"按钮后，需要重启MSRM3使配置生效。
            </p>
          </div>
          
          <!-- 问题3 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 class="text-lg font-bold mb-3">忘记管理员密码怎么办？</h3>
            <p class="text-gray-600">
              如果您忘记了管理员密码，可以通过以下方式重置：在MSRM3安装目录下找到配置文件，修改其中的管理员密码相关配置，或者通过命令行工具重置密码。具体操作请参考<a href="/faq" class="text-primary hover:underline">常见问题</a>页面。
            </p>
          </div>
          
          <!-- 问题4 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 class="text-lg font-bold mb-3">MSRM3支持哪些类型的网络设备？</h3>
            <p class="text-gray-600">
              MSRM3支持各种类型的网络设备，包括交换机、路由器、防火墙、服务器、打印机等。支持通过SNMP、ICMP、TCP等协议管理各种品牌的网络设备，包括华为、华三、思科、锐捷等主流品牌。
            </p>
          </div>
          
          <!-- 问题5 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 class="text-lg font-bold mb-3">如何备份和恢复MSRM3的配置？</h3>
            <p class="text-gray-600">
              登录MSRM3管理界面后，点击左侧菜单栏的"系统设置"选项，在"备份恢复"页面中，点击"备份配置"按钮可以备份当前配置；在需要恢复配置时，点击"恢复配置"按钮，选择之前备份的配置文件即可。
            </p>
          </div>
        </div>
        
        <div class="mt-12 text-center">
          <p class="text-gray-700 mb-4">还有其他问题？</p>
          <a href="/faq" class="btn-primary">
            <i class="fa fa-question-circle mr-2"></i>查看更多常见问题
          </a>
        </div>
      </div>
    </section>
    
  `;
  
  // 创建页脚
  const footer = Footer();
  
  // 组装页面
  gettingStartedPage.appendChild(contentContainer);
  gettingStartedPage.appendChild(footer);
  
  // 添加步骤导航点击事件
  const stepLinks = contentContainer.querySelectorAll('.step-link');
  stepLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      
      // 移除所有链接的活动状态
      stepLinks.forEach(l => {
        l.classList.remove('active');
      });
      
      // 添加当前链接的活动状态
      link.classList.add('active');
      
      // 滚动到对应部分
      const targetId = link.getAttribute('href').substring(1);
      const targetElement = gettingStartedPage.querySelector(`#${targetId}`);
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop - 100,
          behavior: 'smooth'
        });
      }
    });
  });
  
  // 添加滚动监听，更新步骤导航的活动状态
  window.addEventListener('scroll', () => {
    const sections = gettingStartedPage.querySelectorAll('[id^="step-"]');
    let currentSection = '';
    
    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.clientHeight;
      if (window.pageYOffset >= sectionTop - 200) {
        currentSection = section.getAttribute('id');
      }
    });
    
    if (currentSection) {
      stepLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === `#${currentSection}`) {
          link.classList.add('active');
        }
      });
    }
  });
  
  return gettingStartedPage;
}

export default GettingStarted;